import {useState, useEffect} from 'react'
import {useNavigate, useLocation} from 'react-router-dom'
import { Tabs } from 'antd-mobile'
import request from '../../utils/request.jsx'
import './style.less'

const NavList = () => {
    const navigate = useNavigate()
    const location = useLocation()
    const {pathname} = location
    let id = pathname.split('/')[pathname.split('/').length - 1]
    const [key, setKey] = useState('/' + id)
    const [data, setDate] = useState([])
    const getData = async () => {
        let {data} = await request.get('/category')
        setDate(data)
    }
    useEffect(()=> {
        getData()
    },[])
    const list = data&&data.map(item => {
        return <Tabs.Tab key={item.id} title={item.title}/>
    })
    const onChange = key => {
        navigate(`/home/category/${key}`)
        localStorage.setItem('id', JSON.stringify(key))
        setKey(key)
    }
    return (
        <Tabs onChange={onChange} defaultActiveKey={key}>{list}</Tabs>
    )
}

export default NavList;